<template>
  <div class="app-container">
    <el-button type="primary" @click="menu={};dialogFormVisibleADD=true" plain>添加菜单</el-button>
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名" sortable> </el-table-column>
      <el-table-column prop="perms" label="授权" sortable> </el-table-column>
      <el-table-column prop="url" label="菜单URL"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="update(scope.row)"
            icon="el-icon-edit"
            type="primary"
            size="mini"
            >修改</el-button
          >
          <el-button
            @click="del(scope.row)"
            icon="el-icon-delete"
            type="danger"
            size="mini"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加的弹框 -->
    <el-dialog title="增加菜单" :visible.sync="dialogFormVisibleADD">
      <el-form >
        <el-form-item label="菜单名称" >
          <el-input v-model="menu.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="授权" >
          <el-input v-model="menu.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单URL">
          <el-input v-model="menu.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" >
            <el-select v-model="menu.type" placeholder="请选择">
                <el-option label="目录" value="0"></el-option>
                <el-option label="菜单" value="1"></el-option>
                <el-option label="按钮" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="菜单等级" >
           <el-select v-model="menu.parentId" placeholder="请选择" >
                <el-option label="设置为一级菜单" value="0"></el-option>
                <el-option v-for="(item, index) in menuList" :label="item.name" :value="item.id" :key="index"></el-option>
                 
            </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleADD = false">取 消</el-button>
        <el-button type="primary" @click="add();dialogFormVisibleADD = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改的弹框 -->
    <el-dialog title="修改菜单" :visible.sync="dialogFormVisible">
      <el-form :model="menu">
        <el-form-item label="菜单名称" >
          <el-input v-model="menu.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="授权" >
          <el-input v-model="menu.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单URL" >
          <el-input v-model="menu.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型" >
            <el-select v-model="menu.type" placeholder="请选择">
                <el-option label="目录" value="0"></el-option>
                <el-option label="菜单" value="1"></el-option>
                <el-option label="按钮" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="菜单等级" >
           <el-select v-model="menu.parentId" placeholder="请选择" >
                <el-option label="设置为一级菜单" value="0"></el-option>
                <el-option v-for="(item, index) in menuList" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="toupdate();dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { list , update , del , add} from "@/api/sys";
export default {
  data() {
    return {
      dialogFormVisibleADD:false,
      dialogFormVisible:false,
      menuList: [],
      menu: {},
    };
  },
  methods: {
    search() {
      list().then((res) => {
        console.log(res.data);
        this.menuList = res.data.data;
      });
    },
    add(){
        
        console.log(this.menu);
        add(this.menu).then(res=>{
            if(res.ok){
                this.$message({
                    type:res.ok? 'success' : 'error',
                    message:res.ok?'修改成功':'修改失败'
                })
            }
            this.search()
            this.menu = {}
        })
    },
    update(data) {
      this.dialogFormVisible = true;
      this.menu = data;
    },
    toupdate(){
        update(this.menu).then(res=>{
            if(res.ok){
                this.$message({
                    type:res.ok? 'success' : 'error',
                    message:res.ok?'修改成功':'修改失败'
                })
            }
        })
        this.search()
        this.menu = {}
    },
    del(data){
        del(data).then(res=>{
            if(res.ok){
                this.$message({
                    type:res.ok? 'success' : 'error',
                    message:res.ok?'删除成功':'删除失败'
                })
            }
        })
        this.search()
    },
  },
  created() {
    this.search();
  },
};
</script>
<style lang="css">
</style>